<template>
  <section class="m-has-style">
    <dl @mouseover="handleMouseOver">
      <dt>有格调</dt>
      <dd :class="{ active: kind==='all' }" kind="all">全部</dd>
      <dd :class="{ active: kind==='date' }" kind="date">约会聚餐</dd>
      <dd :class="{ active: kind==='movie' }" kind="movie">电影演出</dd>
      <dd :class="{ active: kind==='travel' }" kind="travel">品质出游</dd>
    </dl>
    <ul class="has-style-body">
      <li v-for="item in curList" :key="item.title">
        <el-card :body-style="{ padding: '0px'}" shadow="never">
          <img :src="item.img" alt="">
          <ul class="content-body">
            <li class="title">{{ item.title }}</li>
            <li class="pos"><span>{{ item.pos }}</span></li>
            <li class="price">¥<em>{{item.price}}</em><span>/起</span></li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data () {
    return {
      kind: 'all',
      list: {
        all: [
          { img: 'https://img.meituan.net/phoenix/322b6a6684f9858d0930cc4a541aa6b7455640.jpg@740w_416h_1e_1c', title: '全部', pos: '长沙', price: '89' }
        ],
        date: [
          { img: 'https://img.meituan.net/phoenix/322b6a6684f9858d0930cc4a541aa6b7455640.jpg@740w_416h_1e_1c', title: 'date', pos: '长沙', price: '89' }
        ],
        spa: [
          { img: 'https://img.meituan.net/phoenix/322b6a6684f9858d0930cc4a541aa6b7455640.jpg@740w_416h_1e_1c', title: 'spa', pos: '长沙', price: '89' }
        ],
        movie: [
          { img: 'https://img.meituan.net/phoenix/322b6a6684f9858d0930cc4a541aa6b7455640.jpg@740w_416h_1e_1c', title: 'movie', pos: '长沙', price: '89' }
        ],
        travel: [
          { img: 'https://img.meituan.net/phoenix/322b6a6684f9858d0930cc4a541aa6b7455640.jpg@740w_416h_1e_1c', title: 'travel', pos: '长沙', price: '89' }
        ]
      }
    }
  },
  computed: {
    curList () {
      return this.list[this.kind];
    }
  },
  methods: {
    handleMouseOver (e) {
      const tar = e.target,
            tagName = tar.tagName.toLowerCase();
      if (tagName === 'dd') {
        this.kind = tar.getAttribute('kind');
      }
    }
  }
}
</script>

<style lang="scss">
@import '~@/assets/css/index/hasStyle.scss';
</style>